import React,{ Component } from "react";
import { StyleSheet,View } from "react-native";
import { createAppContainer,createBottomTabNavigator,createStackNavigator,createSwitchNavigator } from "react-navigation";
import Icon from "react-native-vector-icons/AntDesign";  //图标组件
import Login from "../page/Login";  //登陆页面
import InTheLoad from "../page/InTheLoad";  //加载页面
import HomeScreen from "../page/index";     //首页
import PersonCenter from "../page/PersonalCenter/index";  //个人中心
import OtherPage from "../navigation/OtherPage";  //其他页面

//createBottomTabNavigator
const styles = StyleSheet.create({
    container:{
        //选项卡栏的样式对象
    }
})
const selectedColor = "red";  //活动选项卡的标签和图标颜色
const inactiveColor = "black";  //"非活动" 选项卡的标签和图标颜色
const TabNavigator = createBottomTabNavigator({
    Home:{
        screen:HomeScreen,
        navigationOptions:{
            tabBarLabel:'首页',
            tabBarIcon:({ focused, horizontal, tintColor })=>{
                return <Icon name="home" color={focused?selectedColor:tintColor} size={20}/>
            },
        }
    },
    PersonCenter:{
        screen:PersonCenter,
        navigationOptions:{
            tabBarLabel:'个人中心',
            tabBarIcon:({ focused, horizontal, tintColor })=>{
                return <Icon name="apple1" color={focused?selectedColor:tintColor} size={20}/>
            },
        }
    }
},{
    tabBarOptions:{
        activeTintColor:selectedColor,  //活动选项卡的标签和图标颜色
        inactiveTintColor:inactiveColor, //"非活动" 选项卡的标签和图标颜色
        activeBackgroundColor:'white', // 活动选项卡的背景色
        style:styles.container, //选项卡栏的样式对象
    }
});

// 更多配置参考 https://reactnavigation.org/docs/zh-Hans/bottom-tab-navigator.html

//createStackNavigator
const TabStackNavigator = createStackNavigator({
    HomeStack:{
        screen:TabNavigator,
        navigationOptions:{
            headerTitle:'app',
            headerTitleStyle:{  //中间的app首页 文字居中显示
                flex:1,
                textAlign: 'center',
                color:'white',
            },
        }
    },
    ...OtherPage,  //其他页面
},{
    defaultNavigationOptions:{
        //配置顶部导航
        headerTitle:'默认标题',
        headerTitleStyle: { //导航栏文字的样式
            fontSize: 18,
            color:'white',
        },
        headerTintColor:'white', //‘返回’文字的样式  headerBackTitleStyle不可改变 详见- https://github.com/react-navigation/react-navigation/issues/4840
        headerStyle: { //导航栏的样式
            backgroundColor: '#d04542',
            color: 'white',
            height: 50
        },
        gesturesEnabled: true,
        gestureResponseDistance: { //定义手势响应距离屏幕边界的距离
            horizontal: 300,
            vertical: 50
        }
    },
    // initialRouteName:HomeScreen,  //设置 stack navigator 的默认页面， 必须是路由配置中的某一个
})

//createSwitchNavigator 用户认证
const AppStack = createStackNavigator({ Home: TabStackNavigator},{
    defaultNavigationOptions:{
        header:null,
    }
});  // Other: OtherScreen
const AuthStack = createStackNavigator({ SignIn: Login });
const CertificationLoading  = createSwitchNavigator(
    {
        AuthLoading: InTheLoad,
        App: AppStack,
        Auth: AuthStack,
    },
    {
        initialRouteName: 'AuthLoading',
    },
)

export default createAppContainer(CertificationLoading);
